
<!DOCTYPE >
<html lang="en" html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户分配角色</title>
    <link rel="stylesheet" href="../../../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <form class="layui-form" action="" style="padding:20px;">
            <input type="hidden" id="roleIds" name="roleIds" value=""/>
            <input type="hidden" name="userId" value=""/>
            <!--<div class="layui-form-item">
                <label class="layui-form-label required">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" lay-verify="required" lay-reqtext="用户名不能为空" placeholder="请输入用户名" value="" class="layui-input" readonly>
                </div>
            </div>-->
            <div class="layui-form-item">
                <label class="layui-form-label">选择用户</label>
                <div class="layui-input-inline">
                    <input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input" id="user" value="" ts-selected="" readonly>
                </div>
                <div class="layui-form-mid layui-word-aux">如果不选择，默认是清空用户之前拥有的角色</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择角色</label>
                <div class="layui-input-inline">
                    <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" id="role" value="" ts-selected="" readonly>
                </div>
                <div class="layui-form-mid layui-word-aux">如果不选择，默认是清空用户之前拥有的角色</div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="../../../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table', 'form', 'tableSelect'], function () {
        var $ = layui.jquery,
            table = layui.table,
            form = layui.form,
            tableSelect = layui.tableSelect;

        tableSelect.render({
            elem: '#role',
            searchKey: 'name',
            checkedKey: 'id',
            searchPlaceholder: '搜索角色名称',
            table: {
                url: '../../../sys/role/queryAll',
                cols: [[
                    { type: 'checkbox' },
                    { field: 'id', title: '角色编号', width: 100 },
                    { field: 'name', title: '角色名称', width: 100 },
                    { field: 'remark', title: '备注说明', width: 300 }
                ]]
            },
            done: function (elem, data) {
                var names = [];
                var ids = [];
                layui.each(data.data, function (index, item) {
                    names.push(item.name);
                    ids.push(item.id);
                })
                elem.val(names.join(","));
                $("#roleIds").val(ids.join(","));
            }
        })

        tableSelect.render({
            elem: '#user',
            searchKey: 'username',
            checkedKey: 'id',
            searchPlaceholder: '搜索用户名称',
            table: {
                url: '../../../sys/user/queryByPage',
                cols: [[
                    {type: "checkbox", width: 50},
                    {field: 'id', title: 'ID'},
                    {field: 'username', title: '用户名'},
                    {field: 'password', title: '密码'},
                    {field: 'statue', title: '用户状态', templet: function(res){
                            return res.statue==0?"正常":res.statue==1?"冻结":"注销";
                        }},
                    {field: 'createTime', title: '创建时间', sort: true},
                    {field: 'lastUpdateTime', title: '最后更新时间'},
                ]]
            },
            done: function (elem, data) {
                var usernames = [];
                var ids = [];
                layui.each(data.data, function (index, item) {
                    usernames.push(item.username);
                    ids.push(item.id);
                })
                elem.val(usernames.join(","));
                $("#roleIds").val(ids.join(","));
            }
        })
        //监听提交
        form.on('submit(saveBtn)', function (data) {

            $.ajax({
                url:"../../../sys/user-role/add",
                type:"post",
                data:data.field,
                dataType:"json",
                success:function(result){
                    layer.msg(result.msg);
                    if(result.code==0){
                        //关闭窗口
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);
                    }
                }
            });
            return false;
        });
    });
</script>
</body>
</html>